<template>
  <div>
    <div style="padding:20px;">
      <el-input v-model="keyword" placeholder="输入员工姓名" @input="sendKeyword" />
    </div>
    <div style="padding:10px 10px;box-sizing: border-box;">
      <el-tree
        :data="treeData"
        :props="defaultProps"
        :default-expand-all="true"
        @node-click="handleNodeClick"
      />
    </div>

  </div>
</template>
<script>
import { getDepartment } from '@/api/department'
import { toTree } from '@/utils/index'
export default {
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      keyword: '' // 输入框的值
    }
  },
  created() {
    this.getDepart()
  },
  methods: {
    async getDepart() { // 获取部门数据
      const res = await getDepartment()
      console.log(res)
      // 返回部门数据 树形处理
      this.treeData = toTree(res.data, 0)
    },
    handleNodeClick(data) { // 树形点击事件 传部门id给父组件
      console.log(data, '-------------')
      this.$emit('sendDepartId', data.id)
    },
    sendKeyword() { // 搜索条件
      this.$emit('sendWord', this.keyword)
    }
  }
}
</script>
<style lang="scss" scoped>
  // ::v-deep 样式击穿 加上scoped
    ::v-deep .el-tree-node__content{
      height: 40px;
      line-height: 40px;
    }
</style>
